<template>
  <div>
    <el-dialog class="photoUpload" :modal="customData.modal" :title="tableData.title" :visible.sync="tableData.uploadImgShow" :lock-scroll="customData.lockScroll" :fullscreen="customData.fullscreen" :show-close="customData.showClose">
      <el-input v-if="tableData.descShow" v-model="tableData.desc" type="textarea" maxlength="200" />
      <pre v-if="tableData.Exhibition">{{ tableData.desc }}</pre>
      <div ref="photobox" class="photo_Box">

        <div v-for="(item,index) in tableData.imgList" :key="index" class="photoImg">
          <div v-if="tableData.type " @click="deleteImg(item)"><img src="../../../../static/images/deleteImg.png" alt=""></div>
          <img :src="item.url" alt="" @click="previewiImg(item.url)">
        </div>

        <div v-if="tableData.imgList.length<6 && tableData.type" class="addPhotoImg" @click="wxUpload()">
          <img src="../../../../static/images/addImg.png" alt="">
        </div>
      </div>
      <div slot="footer" class="dialog-photofooter">
        <el-button v-if="tableData.type" type="primary" @click="submitUnloadImg()">保 存</el-button>
        <el-button @click="imgUploadClose()">返 回</el-button>
      </div>
    </el-dialog>
    <WPTX_WX_UPLOAD ref="wxUploadImg" @uploadReceive="uploadReceive" />
    <WPTX_PREVIEWIMG ref="wptxPreviewImg" />
  </div>
</template>
<script>
import { global } from '../../filter/global-api'
import Vue from 'vue'
import VueResource from 'vue-resource'
import $ from 'jquery'
import _common from '../../framework/commonJs/wptx_common'
import _tools from '../../framework/commonJs/wptx_tools'
import _validate from '../../framework/commonJs/wptx_validate'
import WPTX_WX_UPLOAD from '../../framework/commonTemplate/wptx_wx_upload'
import WPTX_PREVIEWIMG from '../../framework/commonTemplate/wptx_previewImg'
const _FUNCTION_NAME = _common.pageName.PREVIEWIMG
export default {
  components: {
    WPTX_WX_UPLOAD: WPTX_WX_UPLOAD,
    WPTX_PREVIEWIMG: WPTX_PREVIEWIMG
  },
  filters: {},
  props: {
    uploadImgShow: { // 当前页面是否显示
      type: Boolean,
      default: false
    },
    config: { // 页面的配置
      type: Object,
      default: {}
    },
    imgList: { // 展示的url列表
      type: Array,
      default: []
    },
    parameter: { // 页面单独的参数
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      tableData: {
        uploadImgShow: false,
        title: '', // 页面的标题
        desc: '', // 描述
        descShow: false, // 描述是否显示
        Exhibition: false, // 是否仅显示备注
        Immediately: false, // 是否立即调用拍照
        type: true, // 是操作还是预览
        imgList: [], // 图片的列表
        parameter: {}// 父页面传递过来的参数
      },
      customData: {
        lockScroll: false,
        fullscreen: true,
        showClose: false,
        modal: false,
        imgObjInfo: {}
      }
    }
  },
  watch: {
    uploadImgShow(val) {
      if (val) {
        this.onInit()
      }
    }
  },
  methods: {
    onInit() {
      const self = this
      const countHeight = (document.body.clientWidth - 60) / 3 + 'px'
      if (self.config.desc != null && self.config.desc != undefined && self.config.desc != '') {
        if (self.config.desc.length > 0) {
          self.config.desc = self.config.desc.replace(/&amp;/g, '&')
          self.config.desc = self.config.desc.replace(/&lt;/g, '<')
          self.config.desc = self.config.desc.replace(/&gt;/g, '>')
          self.config.desc = self.config.desc.replace(/&nbsp;/g, ' ')
          self.config.desc = self.config.desc.replace(/&#39;/g, "\'")
          self.config.desc = self.config.desc.replace(/&quot;/g, '"')
          self.config.desc = self.config.desc.replace(/&middot;/g, '·')
          self.config.desc = self.config.desc.replace(/&hellip;/g, '…')
          self.config.desc = self.config.desc.replace(/&mdash;/g, '—')
          self.config.desc = self.config.desc.replace(/&ldquo;/g, '“')
          self.config.desc = self.config.desc.replace(/&rdquo;/g, '”')
          self.config.desc = self.config.desc.replace(/&lsquo;/g, '‘')
          self.config.desc = self.config.desc.replace(/&rsquo;/g, '’')
        }
      }
      self.tableData.uploadImgShow = self.uploadImgShow
      self.tableData.title = self.config.title, // 页面的标题
      self.tableData.desc = self.config.desc, // 描述
      self.tableData.Immediately = self.config.Immediately
      self.tableData.descShow = self.config.descShow, // 描述是否显示
      self.tableData.Exhibition = self.config.Exhibition, // 是否仅显示备注
      self.tableData.type = self.config.type, // 是操作还是预览
      self.tableData.imgList = self.imgList, // 图片的列表
      self.tableData.parameter = self.parameter// 父页面传递过来的参数
      if (self.tableData.Immediately) {
        self.wxUpload()
      }
      if (_validate.checkEmpty(self.tableData.desc) && self.config.Exhibition) {
        self.tableData.desc = '暂无信息'
      }
    },
    callBack_Init(data) {
    },
    imgUploadClose() {
      const self = this
      self.tableData.uploadImgShow = false
      self.$emit('imgUploadClose', self.tableData.uploadImgShow)
    },
    deleteImg(data) {
      const self = this
      if (_validate.checkEmpty(data.id)) {
        self.localDeleteImg(data)
      } else {
        self.customData.imgObjInfo = _tools.cloneObj(data)
      }
    },
    localDeleteImg(data) {
      const self = this
      const imgLists = self.tableData.imgList
      for (var i = 0; i < imgLists.length; i++) {
        const imgListInfo = imgLists[i]
        if (imgListInfo.url == data.url) {
          self.tableData.imgList.splice(i, 1)
        }
      }
    },
    deleteImgReceive() {
      const self = this
      const data = self.customData.imgObjInfo
      const imgLists = self.tableData.imgList
      for (var i = 0; i < imgLists.length; i++) {
        const imgListInfo = imgLists[i]
        if (imgListInfo.id == data.id) {
          self.tableData.imgList.splice(i, 1)
          _tools.openTip(self, '删除成功', 'success')
        }
      }
    },
    wxUpload() {
      const self = this
      self.$refs.wxUploadImg.chooseImage()
    },
    uploadReceive(serverId) {
      const self = this
      self.unloadImg(serverId)
    },
    // 调用父页面的添加图片
    unloadImg(data) {
      const self = this
      self.$emit('unloadImg', self.tableData.parameter, data)
    },
    unloadImgReceive(data) {
      const self = this
      const Obj = {
        fileName: data.fileName == undefined ? '' : data.fileName,
        url: data.remarkDownloadPath == undefined ? '' : data.remarkDownloadPath,
        imgUrl: data.remarkRelativePath == undefined ? '' : data.remarkRelativePath,
        id: data.id == undefined ? '' : data.id
      }
      self.tableData.imgList.push(Obj)
    },
    // 调用父页面的保存
    submitUnloadImg() {
      const self = this
      if (self.tableData.descShow) {
        if (_validate.checkEmpty(self.tableData.desc)) {
          _tools.openTip(self, '请填写内容', 'warning')
          return false
        }
        self.$emit('submitUnloadImg', self.tableData.parameter, self.tableData.imgList, self.tableData.desc)
      } else {
        self.$emit('submitUnloadImg', self.tableData.parameter, self.tableData.imgList)
      }
    },
    submitUnloadImgReceive(data) {
      const self = this
      _tools.openTip(self, '成功', 'success')
      self.imgUploadClose()
    },
    previewiImg(data) {
      const self = this
      self.$refs.wptxPreviewImg.previewImage(data)
    }
  }
}
</script>
<style scoped>
.photo .el-textarea{
  margin-bottom: 20px;
}
.photo > div {
  width: 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
}
.photo_Box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width:calc(100% + 10px);
  margin-left:-10px;
  flex-wrap: wrap;
}
.photo_Box > div {
  position: relative;
  width:calc(33.33% - 10px);
  height:117px;
  flex:none;
  margin: 0 0 10px 10px;
  box-sizing: border-box;

}
.addPhotoImg {
  border: 0;
}
.photo_Box > div > div {
  position: absolute;
  right: 5px;
  top: 5px;
  height: 21px;
  width: 20px;
}
.photo_Box > div > div img {
  width: 100%;
  height: 100%;
}
.photo_Box > div{
  display:flex;
  justify-content: center;
  align-items: center;
}

.photo_Box > div > img {

  max-width: 100%;
  max-height: 100%;
}
.photo_btn {
  margin-top: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
pre{
  word-wrap:break-word; word-break:break-all;    white-space: pre-line;
}
</style>
